/*
 * 修改产品品牌信息
 * @Author: yudong
 * @Date: 2018-04-19 17:53:27
 * @Last Modified by: ljb
 * @Last Modified time: 2019-04-15 17:57:15
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.ivu-form-item-content {
  img {
    width: 150px;
  }
}
</style>
<template>
	<div class="v-customer-product-brand-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth()"
		>
			<Form-item
				:label="$t('brand.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('brand.please_enter_name')"
					type="text"
				/>
			</Form-item>

			<!-- <Form-item
				:label="$t('brand.url')"
				prop="url">
				<i-input
					v-model="formValidate.url"
					:placeholder="$t('brand.please_enter_url')"
					type="url"/>
      </Form-item>-->

			<!-- 排序 -->
			<Form-item
				:label="$t('common.sort')"
				prop="sort">
				<InputNumber
					:max="100000"
					:min="0"
					v-model="formValidate.sort"
					:placeholder="$t('common.placeholder',{'field':$t('common.sort')})"
				/>
			</Form-item>

			<Form-item
				:label="$t('brand.logo')"
				prop="logo">
				<Uploader
					ref="logo"
					:default.sync="logo_src"
					@on-remove="(file)=>{handleRemove('logo',file)}"
					@on-change="(file)=>{handleChange('logo',file)}"
				>{{ $t('common.pic_tip') }}</Uploader>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="updateBrand">{{ $t('common.update') }}</Button>
			</Form-item>
		</Form>
	</div>
</template>

<script>
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import Uploader from 'src/views/component/Uploader';
import { validateImage } from 'src/validate'; // 引入校验文件
import { showLocalImage } from 'src/views/mixins/showLocalImage';
// 引入公共的mixins
export default {
	name: 'BrandEdit',
	components: {
		Uploader,
	},

	mixins: [showLocalImage, labelWidthMixin],
	props: {
		brandDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},

	data() {
		return {
			formValidate: {
				name: '',
				sort: 0, // 优先级
				logo: '',

				// url: '',
			}, // 更新品牌时的表单

			logo_src: '',

			ruleValidate: {
				// 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', {
							field: this.$t('brand.name'),
						}),
						trigger: 'blur,change',
					},
				],
				sort: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', {
							field: this.$t('common.sort'),
						}),
						trigger: 'blur,change',
					},
				],
				logo: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
			},
		};
	},

	created() {
		this.initFormData();
	},

	methods: {
		initFormData() {
			if (this.brandDetail) {
				this.formValidate.name = this.brandDetail.name || '';

				this.formValidate.logo = this.brandDetail.logo || '';

				this.formValidate.sort = this.brandDetail.sort;
				// this.formValidate.url = this.brandDetail.url || '';

				this.logo_src = this.brandDetail.logo || '';
			}
		},

		/**
     * 选择图片
     * @param {Object} file {选择的文件对象集合}
     * @param {String} field {icon}
     * @return {undefined}
     */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			// this.$refs.formValidate.validateField(field);
		},

		/**
     * 删除图片
     * @param {String} filed {icon}
     * @return {undefined}
     */
		handleRemove(field) {
			this.formValidate[field] = null;
			// this.$refs.formValidate.validateField(field);
		},

		/**
     * 更新品牌信息
     * @return {undefined}
     */
		updateBrand() {
			this.$emit('update', this.brandDetail.id, this.formDataCreate());
		},

		/**
     * 手动拼接formdata数据
     * @return {Object}
     */
		formDataCreate() {
			const new_object = {
				_method: 'PUT',

				name: this.formValidate.name,
				sort: this.formValidate.sort,
				logo: this.formValidate.logo,

				// url: this.formValidate.url,
			};

			// const form_data = new FormData();

			// Object.keys(new_object).forEach((key) => {
			// 	if (new_object[key]) {
			// 		form_data.append(key, new_object[key]);
			// 	}
			// });

			return new_object;
		},
	},
};
</script>
